<template>
  <view class="safe-box">
    <view class="title">校园集市</view>
    <u-tabs :list="list1" @click="switchPage"></u-tabs>
    <!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
    <view v-if="current===0">
      <u--form class="form" labelPosition="left" :model="formData" :rules="rules" ref="form" labelWidth="60">
        <u-form-item label="用户名" prop="username" borderBottom>
          <u--input v-model="formData.username" border="none" clearable placeholder="请输入用户名"></u--input>
        </u-form-item>
        <u-form-item label="密码" prop="password" borderBottom>
          <u--input type="password" v-model="formData.password" border="none" clearable placeholder="请输入密码"></u--input>
        </u-form-item>
      </u--form>
      <u-button type='primary' text="登录" @click="login" />
    </view>
    <Register v-else></Register>
    <!-- #ifdef MP-WEIXIN -->
    <view class="login-list">
      <view class="login-item" @click="wxlogin">
        <u-icon name="weixin-fill" size="50"></u-icon>
        <span>微信登录</span>
      </view>
    </view>
    <!-- #endif -->
  </view>
</template>

<script>
  import Register from './register.vue'
  export default {
    components: {
      Register
    },
    data() {
      return {
        current: 0,
        list1: [{
          name: '登陆',
        }, {
          name: '注册',
        }],
        showSex: false,
        formData: {
          username: '666666',
          password: '666666',
        },
        rules: {
          'username': {
            type: 'string',
            required: true,
            message: '请输入用户名',
            trigger: ['blur', 'change']
          },
          'password': {
            type: 'string',
            required: true,
            message: '请输入密码',
            trigger: ['blur', 'change']
          },
        }
      };
    },
    methods: {
      switchPage(e) {
        console.log(e)
        this.current = e.index
      },
      async login() {
        console.log('this.form', this.formData)
        const form = await this.$refs.form.validate()
        // console.log('form', form)
        const res = await this.$http.post('/login', this.formData)
        console.log(res)
        console.log('+++++++++++++')
        if (!res.data) return
        this.$store.dispatch('login', res.data)
        this.$store.dispatch('getMsgList').then(() => {
          this.$store.commit('setMsgRedDot')
        })
        this.$nav.switchTab('/pages/mine/mine')
      },
      wxlogin() {
        this.$tip.showLoading()
        const provider = 'weixin'
        uni.getUserProfile({
          desc: '绑定微信登陆，便利用户',
          success: async (data) => {
            console.log('data', data.userInfo)
            uni.login({
              provider,
              onlyAuthorize: true,
              success: async (e) => {
                console.log('e', e);
                const res = await this.$http.post('/login/wx', {
                  code: e.code,
                  userInfo: data.userInfo
                })
                this.$store.dispatch('login', res.data)
                this.$store.dispatch('getMsgList').then(() => {
                  this.$store.commit('setMsgRedDot')
                })
                this.$nav.switchTab('/pages/mine/mine')
              },
              fail(e) {
                console.log(e)
              }
            });
          },
          complete() {
            // this.$tip.hideLoading()
          }
        })
      }
    },
    mounted() {
      console.log(this.$store)
    }
  }
</script>

<style lang="scss" scoped>
  .title {
    font-size: 50rpx;
    padding: 50rpx;
    font-weight: bold;
    text-align: center;
    color: $primary-color;
  }

  ::v-deep .u-form {
    padding: 20rpx;
    margin-bottom: 20rpx;
    margin-top: 10rpx;
    box-shadow: 0 0 20rpx rgba(0, 0, 0, .1);
  }

  .login-list {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100rpx;
    display: flex;
    justify-content: center;
    text-align: center;
    font-size: 24rpx;
  }
</style>
